While the number of links you get to your website and the popularity it will receive do not depend only on you, the on-page optimization is in your hands and nowadays you MUST squeeze out everything you can from it.
This is why I start each new website by creating its backbone (call it framework, template or whatever you prefer). In this post I will try to use all the benefits HTML5 provides without damaging the way the future website will look on older browsers. Basically, there are few things we should worry about regarding our code – is it semantic, is it valid and is it small enough to run fast.
So let’s start building our index page element by element making sure everything is in its place and working as it’s supposed to.
1. Doctype and head element
The first row of our file should be the doctype declaration. All you have to add here is:
Don’t worry about the old browsers. Using this declaration you save precious bytes and you can be sure that the proper doctype will be used by every browser.
Now, let’s proceed with the
part of the page. The first thing you should specify in it is the title of the page. Place it right after the declaration. The title is one of the most important elements of your page. You can check Rand’s Article about Ranking Factors for more information on that matter.After the title declaration, specify the charset of the page. Once again HTML5 allows us to use less words to do that. Remember the old ? You don’t need to use so many unnecessary words in your page. Just type . Browsers will recognize it, so will search engines.
Last but not least, we add the declaration about the page stylesheet and the description of the page. Of course, for a real website you can and will have to add more information in the head but for the purposes of this post let’s stick to the basics.
At this point the head part of the page should look like this:
SEO-Optimized WordPress Template
Lets proceed with adding some navigation to the page. Using unsorted lists for this is great. But let’s take it one step further, surround that in
Article Heading
Article Sub-heading
Nam erat arcu, faucibus vitae adipiscing non, elementum in
diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
vel velit nunc. Cras ut varius nunc. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Integer ut leo dolor.
3. Make it look good on old browsers
Unfortunately, old browsers do not render HTML5 elements correctly as blocks. Therefore there are few things you should do in order to fix that. First, add the following line to the style.css file of your site:
address, article, header, footer, nav {display: block;}
It will define the HTML elements we have used on this page as block. That should ensure the proper display of your site on almost all browsers except IE6 (how unusual).
IE6 has issues recognizing those tags as page elements. Therefore, you need to add a simple JavaScript and “create” them so IE6 can load the appropriate rules for those elements from the CSS file and display them properly. To do this, add a simple JavaScript:
Just paste it into the head part of the HTML code. Note that I have used only
